<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

	<!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

	<!-- 固定的css 和 common.js 的引用    -->
	<link rel="stylesheet" href="https://gitee.com/huaflower/CommonTraderUnionFile/raw/master/css/sm.min.css">
	<link rel="stylesheet" href="https://gitee.com/huaflower/CommonTraderUnionFile/raw/master/css/sm-extend.min.css">
	<link href="https://cdn.bootcss.com/Swiper/4.0.6/css/swiper.min.css" rel="stylesheet">
	<script type="text/javascript" src="https://gitee.com/huaflower/CommonTraderUnionFile/raw/master/common/js/common.js"></script>

	<style type="text/css">
  	/*css 的样式都放在这里*/

  	body{padding: 0;margin: 0}
        .swiper-slide{width: auto!important;}
        .topmenu{height: auto;background-color: white;border-bottom: 1px solid #CCCCCC;padding: 0 10px;line-height: 35px;font-family: "微软雅黑"}

  	.infinite-scroll-preloader {
        margin-top:-20px;
  	}
	#message{
		display: flex;
		justify-content:space-around;
		font-weight: 700;
	}
	.message_block{
		width: 50%;
		text-align: center;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		border: solid 1px #D8D8D8;
	}
	.message_block_right{
		width: 50%;
		padding-top: 1rem;
		padding-bottom: 1rem;
		text-align: center;
		border: solid 1px #D8D8D8;
	}
	#label{
		/*width: auto;*/
		display: flex;
		justify-content:flex-start;
	}
	.label_list{
		width: 4rem;
		border: solid 1px red;
	}
	#list_ul{
		background-color: transparent;
		display: flex;
		flex-wrap: wrap;
	}
	.goods_list{
		padding: 5px;
        background-color: white;
        width: 45%;
        margin: 2.5%;
        height: 100px;
        text-align: center;
	}

	.goods_list_bottom{
		padding: 5px;
        background-color: white;
        width: 95%;
        margin: 2.5%;
        height: 60px;
        text-align: center;
	}

	.goods_list_bottom2{
		padding: 5px;
        background-color: white;
        width: 95%;
        margin: 2.5%;
        height: 80px;
        text-align: center;
	}


	.goods{
		color: white;
		font-size:18px;
	}
	.goods span{
		    position: absolute;
            top:50%;
            left:50%;
            overflow: hidden;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
	}

	.price{
		display: flex;
		justify-content: space-between;
	}
	.price{
		padding-left: 10%;
		padding-right: 10%;
	}
	.topmenu{
		padding: 0px;
	}
	.jifen_color{
		color: red;
	}
	.price_style{
		color: darkgray;
		/*text-decoration:line-through;*/
	}

	.topfont15{
		font-size: 15px;
	}
	#zongjifen{
		color: red;
		font-size: 18px;
	}
	#tihuoquan{
		color: red;
		font-size: 18px;
	}
	/*.content,.infinite-scroll,*/
	#addlength{
		top: 3.7rem;
	}

	.list-block{
	  margin: 0 0 1.75rem 0;
	 }
</style>


</head>
<body>
<div class="page-group">
	<div class="page page-current">
		<!-- html代码内容区域 -->
		<!--<div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
          	<div class="list-block">
              	<ul class="list-container">
              	</ul>
          	</div>-->
		<!-- 加载提示符 -->
		<!--<div class="infinite-scroll-preloader">
            <div class="preloader"></div>
       </div>
    </div>-->
		<div id="main" style="background-color: white;" >
			<!--积分信息-->
			<div id="message">
				<div id="" class="message_block">
	    				
	    				<span class="topfont15">
	    					&nbsp;&nbsp;&nbsp;&nbsp;积分：
	    				</span>
	    				<span id="zongjifen">0</span>
	    				<br/>
	    				<span class="topfont15">
	    					提货券：
	    				</span>
	    				<span id="tihuoquan">0</span>
	    				
				</div>
				<div id="" class="message_block_right" onclick="duihuanjilu()">
	    			<span>
	    				兑换记录
	    			</span>
				</div>
			</div>
			<!--商品标签-->
			<!--<div id="label">
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
                <div id="" class="label_list">
                    家电
                </div>
            </div>-->
			<!--商品列表-->
			<div id="list">
				<!--<ul class = "content" id = "list_ul">
                  <li class="goods_list">
                      <div class="goods">
                          <div id="goods_img">
                              <img src="../img/btn_downfile.jpg"/>
                          </div>
                          <div id="">
                              <div id="" class="name">
                                  火龙果
                              </div>
                              <div class="price">
                                  <span id="">
                                      50积分
                                  </span>
                                  <span id="">
                                      100积分
                                  </span>
                              </div>
                          </div>
                      </div>
                  </li>
                </ul>-->
				<div class="content infinite-scroll infinite-scroll-bottom" id="addlength" data-distance="0" style="">
					<div class="list-block">
						<ul class="list-container" id="list_ul">
							<!-- <li class="goods_list" id="li1">
                                <div class="goods">
                                    <span > 客服电话: 13681075398</span>
                                </div>
                          </li>
                          <li class="goods_list" id="li2">
                                <div class="goods">
                                    <span > 客服电话: 13681075398</span>
                                </div>
                          </li>
                          <li class="goods_list" id="li3">
                                <div class="goods">
                                    <span > 客服电话: 13681075398</span>
                                </div>
                          </li>
                          <li class="goods_list" id="li4">
                                <div class="goods">
                                    <span > 客服电话: 13681075398</span>
                                </div>
                          </li>
                          <li class="goods_list_bottom" id="li5">
                                <div class="goods">
                                    <span > 客服电话: 13681075398</span>
                                </div>
                          </li> -->
						</ul>

					</div>
				</div>
			</div>
			<!--<input type="button" onclick="button()" name="" id="" value="按钮" />-->
		</div>


	</div>
</div>





<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<script type="text/javascript" src="https://gitee.com/huaflower/CommonScoreShop/raw/master/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script src="https://cdn.bootcss.com/Swiper/4.0.6/js/swiper.min.js"></script>
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/CommonScoreShop/raw/master/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/CommonScoreShop/raw/master/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/CommonScoreShop/raw/master/js/sm-extend.min.js' charset='utf-8'></script>
<!-- <script type="text/javascript" src="../common/common.js"></script> -->

<script type="text/javascript">
// 函数区域，函数放在“初始化区域的上面”

	//客服电话
	var sphone = "010-57203757";


      function getParams(data){
	    // data需要转成json调用 ，函数urlParamParseJson();
 		var jsonData = urlParamParseJson(escape2Html(data));
 		if(jsonData){
 			scoremain = jsonData.score;
 			$$("#zongjifen").text(jsonData.score);
 			$$("#tihuoquan").text(jsonData.lading_bill);
 		}

  	}
    function successCallback(data){
    	if(typeof(data) != "undefined"){
    		console.log(data);
    		if(data.callbacktype == 'productlist'){//商品列表回调
    			friendsSuccess(data);
    		}else if(data.callbacktype == 'dicts'){//字典回调
    			biaoqianSuccess(data);
    		}

    	}

    }
         function bg3(index){
         	// var r=Math.floor(Math.random()*256);
             // var g=Math.floor(Math.random()*256);
             // var b=Math.floor(Math.random()*256);
             var r = 0;
             var g = 0;
             var b = 139;
         	if(index%3 == 0){
         		r = 230;
         		g = Math.floor(130+index*17);
         	}
         	if(index%3 == 1){
         		r = 210;
         		g = Math.floor(130+index*17);
         	}
         	if(index%3 == 2){
         		r = Math.floor(230-index*69);
         		g = 230;
         	}
             
             return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
         }

	function errorCallBack(data){
		console.log(data);
	}

//	标签类别回调接口
	function biaoqianData(){
		var params = {
			callbacktype:'dicts',
			user_id:curuserid,
			type:'product_kind'
		}
        net_request('get','dicts',params,successCallback,biaoqianerrorCallBack);
    }
//	种类成功回调
	function biaoqianSuccess(data){
        if(typeof(data) != "undefined"){
            if(isNotNull(data.body)&&data.body.length>0){
//          	console.log(data);
            	var strlist = "";
            	//kind = data.body[0].key;
//          	alert(kind);
				
				$$("#list_ul").html("");
            	for(var w=0;w<data.body.length;w++){
//          		console.log(data.body[w].value);
					// if(data.body.length%2 != 0 && w == data.body.length-1){
					            strlist += '<li class="goods_list_bottom" onclick="onlist(this)"  onkey="'+data.body[w].key+'">\<div class="goods">\
					            <span>'+data.body[w].value+'</span>\
					            </div>\
					            </li> ';
					 // }else{
					                // strlist += '<li class="goods_list" onclick="onlist(this)"  onkey="'+data.body[w].key+'">\<div class="goods">\
					                // <span>'+data.body[w].value+'</span>\
					                // </div>\
					                // </li> ';
					 // }
            	}
            	strlist += '<li class="goods_list_bottom2" onclick="oncall(this)"  >\
            	            <div class="goods">\
            	            <span> 客服电话: '+sphone+'<br/>接听时间: 周一至周五9:00 - 17:00</span>\
            	            </div>\
            	            </li> ';

            	$$("#list_ul").html(strlist);
            	$$("li").each(function(index,element){
            		$$(this).css('background',bg3(index));
  				});
            	
            }
            requestData();
        }
    }
//	种类失败回调
	function biaoqianerrorCallBack(data){
		console.log(data);
	}

	function onlist(onthis){

	var	kind = $$(onthis).attr("onkey");
	native_goto('local/shangcheng_list?kind='+kind);
	}

	//开始拨打电话
	function oncall(onthis){
		//开始拨打电话
		var param = {
		    type:'callphone',
		    phone:sphone
		};
		send_data(param);
	}

	function duihuanjilu(){
		native_goto('local/jifen_duihuanjilu_list');
	}
	// 初始化区域
    $(function () {
		biaoqianData();

		// $$("#li1").css("background-color",bg3(0));
		// $$("#li2").css("background-color",bg3(1));
		// $$("#li3").css("background-color",bg3(2));
		// $$("#li4").css("background-color",bg3(3));
		// $$("#li5").css("background-color",bg3(4));
        $.init();
    });
  
</script>
</body>
</html>